<template>
  <div class="live">
    <header>
      <span class="logo">
        <img src="../img/2.gif" alt />
      </span>
      <span>直 播</span>
      <span class="return" @click="back()">
        <van-icon name="arrow-left" />
      </span>
    </header>
    <main>
      <div class="live-list" v-for="(item,index) in list" :key="index">
        <div class="demo col-md-3">
          <video-player
            class="video-player vjs-custom-skin"
            ref="videoPlayer"
            :playsinline="true"
            :options="playerOptions0"
          ></video-player>
        </div>
        <p>{{item.tit}}</p>
        <span>{{item.time}}</span>
      </div>
    </main>
  </div>
</template>

<script>
import axios from "../../ulis/request";
export default {
  data() {
    return {
      playerOptions0: {
        //播放速度
        playbackRates: [0.5, 1.0, 1.5, 2.0],
        //如果true,浏览器准备好时开始回放。
        autoplay: false,
        // 默认情况下将会消除任何音频。
        muted: false,
        // 导致视频一结束就重新开始。
        loop: false,
        // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        preload: "auto",
        language: "zh-CN",
        // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        aspectRatio: "16:9",
        // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        fluid: true,
        sources: [
          {
            //类型
            type: "video/mp4",
            //url地址
            // src:"https://tb-video.bdstatic.com/tieba-smallvideo-transcode-cae/124_b3cc5fb002bbbb22d9f0cdbb80c4762e_0_cae.mp4?vt=0&pt=3&ver=&cr=3&cd=3&sid=&ft=2&tbau=2021-09-30_36a7c0740a86445ec3d51d84547d8346a6228e38233ec467d13656b9489d1ab9&ptid=7555159925"
            // src:"https://tb-video.bdstatic.com/tieba-smallvideo-transcode-crf/8_7d255f157c77be6ff82123e7a817d293_0.mp4?vt=0&pt=3&ver=&cr=3&cd=0&sid=&ft=2&tbau=2021-09-30_35ba46089712ea5bf655c5512dc5055eb6949d919be1a86af9ab1728f7049db0&ptid=",
            src:"https://tb-video.bdstatic.com/tieba-smallvideo-transcode-crf/15_d9cde0a59387b5e55c1a5ab991c588a0_0.mp4?vt=0&pt=3&ver=&cr=3&cd=0&sid=&ft=2&tbau=2021-10-08_793abf802d7a4715b5655bd76750716a965d3b042a1ec234d52e232b8929ae83&ptid="
            
          }
        ],
        //你的封面地址
        poster: "",
        //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        notSupportedMessage: "此视频暂无法播放，请稍后再试",
        controlBar: {
          timeDivider: true,
          durationDisplay: true,
          remainingTimeDisplay: false,
          //全屏按钮
          fullscreenToggle: true
        }
      },
      list: []
    };
  },
  created() {
    //调用函数
    this.getList();
  },
  methods: {
    //渲染直播列表
    getList() {
      axios({
        url: "/api/liveList"
      }).then(res => {
        if (res.data.code === 1) {
          this.list = res.data.data;
        } else {
          this.$router.push(`/login`);
        }
      });
    },
    //返回上一级
    back() {
      this.$router.push(`/`)
    },
  }
};
</script>

<style>
.live {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.live header {
  width: 100%;
  height: 60px;
  background-color: #2997fb;
  text-align: center;
  line-height: 60px;
}

.live header span {
  color: white;
  float: right;
  margin-right: 80px;
  /* vertical-align: middle; */
  font-size: 18px;
}

.live header .logo {
  float: right;
  margin-right: 10px;
}

.live header .return {
  float: left;
  margin-left: 30px;
  vertical-align: middle;
  margin-top: 3px;
}

.live main {
  flex: 1;
  overflow-y: auto;
}

.live .live-list{
  width: 100%;
  height: 280px;
  /* border: 1px solid #ccc; */
}

.live .live-list > p{
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 0;
  margin-left: 2%;
}

.live .live-list > span{
  font-size: 14px;
  float: right;
  margin-right: 3%;
}

.demo {
  display: inline-block;
  width: 96%;
  height: auto;
  text-align: center;
  line-height: 100px;
  border: 1px solid transparent;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  margin-left: 2%;
}

.demo:hover {
  display: block;
}
　 .vjs-custom-skin > .video-js .vjs-big-play-button {
  transform: scale(0.6) !important;
}
</style>